<template>
  <div class="card-layout">
    <!-- 全屏搜索头部 -->
    <header class="search-header">
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索功能、订单、商品、会员... (支持拼音首字母)"
          clearable
          size="large"
          @input="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <div class="user-section">
        <el-tooltip content="导航设置">
          <el-button circle @click="showNavigationSettings">
            <el-icon><Setting /></el-icon>
          </el-button>
        </el-tooltip>
        <el-dropdown @command="handleUserCommand">
          <div class="user-info">
            <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            <span class="username">管理员</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <!-- 卡片式导航 -->
    <div class="card-navigation" v-if="!currentPath || currentPath === '/dashboard'">
      <div class="nav-container">
        <!-- 分类标签 -->
        <div class="category-tabs">
          <div
            v-for="category in categories"
            :key="category.id"
            class="category-tab"
            :class="{ active: activeCategory === category.id }"
            @click="activeCategory = category.id"
          >
            <el-icon :size="24"><component :is="category.icon" /></el-icon>
            <span>{{ category.title }}</span>
            <el-badge v-if="category.count" :value="category.count" />
          </div>
        </div>

        <!-- 功能卡片 -->
        <div class="cards-grid">
          <div
            v-for="card in filteredCards"
            :key="card.path"
            class="function-card"
            @click="navigateTo(card.path)"
          >
            <div class="card-bg" :style="{ background: card.color }"></div>
            <div class="card-content">
              <div class="card-icon">
                <el-icon :size="40">
                  <component :is="card.icon" />
                </el-icon>
              </div>
              <h3 class="card-title">{{ card.title }}</h3>
              <p class="card-desc">{{ card.description }}</p>
              <div class="card-meta">
                <el-tag v-if="card.badge" :type="card.badgeType" size="small">{{ card.badge }}</el-tag>
                <span v-if="card.count" class="card-count">{{ card.count }}</span>
              </div>
            </div>
            <div class="card-hover-overlay">
              <el-button type="primary" size="large">
                <el-icon><Right /></el-icon>
                进入
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页面内容 -->
    <main class="page-content" v-else>
      <!-- 返回按钮 -->
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </div>

      <router-view v-slot="{ Component }">
        <transition name="card-slide" mode="out-in">
          <component :is="Component" :key="$route.fullPath" />
        </transition>
      </router-view>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, watch, markRaw } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useNavigationStore } from '@/stores/navigation'
import { useUserStore } from '@/stores/user'
import {
  Search, ShoppingCart, Box, Money, UserFilled, DataBoard, Setting,
  Suitcase, Van, Calendar, TrendCharts, Grid, Right, ArrowLeft,
  HomeFilled, Star, DataAnalysis
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const searchKeyword = ref('')
const activeCategory = ref('all')
const currentPath = computed(() => route.path)

// 分类
const categories = ref([
  { id: 'all', title: '全部', icon: markRaw(Grid), count: null },
  { id: 'hot', title: '常用', icon: markRaw(Star), count: null },
  { id: 'business', title: '业务', icon: markRaw(ShoppingCart), count: 6 },
  { id: 'analysis', title: '分析', icon: markRaw(DataAnalysis), count: 3 },
  { id: 'manage', title: '管理', icon: markRaw(Setting), count: 4 }
])

// 功能卡片
const functionCards = ref([
  {
    path: '/sales',
    title: '销售管理',
    description: '销售订单、客户管理、收银系统、促销活动',
    icon: markRaw(ShoppingCart),
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    badge: '',
    badgeType: '',
    category: 'business',
    hot: true,
    count: '1,234 订单'
  },
  {
    path: '/inventory',
    title: '库存管理',
    description: '商品管理、库存监控、库存调拨、库存盘点',
    icon: markRaw(Box),
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    badge: '预警',
    badgeType: 'danger',
    category: 'business',
    hot: true,
    count: '23 预警'
  },
  {
    path: '/finance',
    title: '财务管理',
    description: '收入管理、支出管理、发票管理、账户管理',
    icon: markRaw(Money),
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    badge: '',
    badgeType: '',
    category: 'business',
    hot: true,
    count: '¥567万'
  },
  {
    path: '/member',
    title: '会员管理',
    description: '会员资料、积分营销、数据分析、会员报表',
    icon: markRaw(UserFilled),
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    badge: 'HOT',
    badgeType: 'danger',
    category: 'business',
    hot: true,
    count: '12.5万 会员'
  },
  {
    path: '/reports',
    title: '综合报表',
    description: '销售报表、库存报表、财务报表、会员报表',
    icon: markRaw(DataBoard),
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    badge: 'HOT',
    badgeType: 'warning',
    category: 'analysis',
    hot: true,
    count: '13 报表'
  },
  {
    path: '/cockpit',
    title: '数据驾驶舱',
    description: '实时监控、数据大屏、业务概览、系统监控',
    icon: markRaw(TrendCharts),
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    badge: '',
    badgeType: '',
    category: 'analysis',
    hot: false
  },
  {
    path: '/extensions',
    title: '扩展中心',
    description: '插件市场、主题商店、插件开发、主题开发',
    icon: markRaw(Suitcase),
    color: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
    badge: 'NEW',
    badgeType: 'success',
    category: 'manage',
    hot: false,
    count: '50+ 插件'
  },
  {
    path: '/purchase',
    title: '采购管理',
    description: '采购订单、供应商管理、收货管理、退货处理',
    icon: markRaw(Van),
    color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    badge: '',
    badgeType: '',
    category: 'business',
    hot: false
  },
  {
    path: '/system',
    title: '系统管理',
    description: '用户管理、角色权限、系统设置、操作日志',
    icon: markRaw(Setting),
    color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
    badge: '',
    badgeType: '',
    category: 'manage',
    hot: false
  },
  {
    path: '/project',
    title: '项目管理',
    description: '项目列表、看板视图、任务管理、甘特图',
    icon: markRaw(Calendar),
    color: 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)',
    badge: '',
    badgeType: '',
    category: 'manage',
    hot: false,
    count: '45 项目'
  }
])

// 过滤卡片
const filteredCards = computed(() => {
  let cards = functionCards.value

  // 分类过滤
  if (activeCategory.value === 'hot') {
    cards = cards.filter(c => c.hot)
  } else if (activeCategory.value !== 'all') {
    cards = cards.filter(c => c.category === activeCategory.value)
  }

  // 搜索过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    cards = cards.filter(c =>
      c.title.toLowerCase().includes(keyword) ||
      c.description.toLowerCase().includes(keyword)
    )
  }

  return cards
})

const navigateTo = (path) => {
  router.push(path)
}

const goBack = () => {
  router.push('/dashboard')
}

const handleSearch = () => {
  // 搜索逻辑
}

const showNavigationSettings = () => {
  // 触发导航设置对话框
  window.dispatchEvent(new CustomEvent('show-navigation-settings'))
}

const handleUserCommand = (command) => {
  if (command === 'logout') {
    router.push('/login')
  } else if (command === 'profile') {
    router.push('/system/user-settings')
  }
}

// 监听路由变化
watch(() => route.path, () => {
  if (route.path === '/dashboard' || route.path === '/') {
    searchKeyword.value = ''
  }
})
</script>

<style scoped>
.card-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.search-header {
  padding: 40px 60px 30px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.search-container {
  flex: 1;
  max-width: 800px;
}

.search-container :deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  padding: 8px 20px;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.username {
  color: white;
  font-weight: 500;
}

/* 卡片导航 */
.card-navigation {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  height: 0;
  padding: 0 60px 60px;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
}

.category-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.category-tab:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.category-tab.active {
  background: white;
  color: #667eea;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  animation: cardsIn 0.6s ease;
}

@keyframes cardsIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.function-card {
  position: relative;
  height: 200px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.function-card:hover {
  transform: translateY(-10px) scale(1.02);
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.95;
}

.card-content {
  position: relative;
  padding: 24px;
  color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-icon {
  margin-bottom: 16px;
}

.card-title {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 600;
}

.card-desc {
  margin: 0 0 auto 0;
  font-size: 14px;
  opacity: 0.95;
  line-height: 1.6;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.card-count {
  font-size: 13px;
  opacity: 0.9;
}

.card-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.function-card:hover .card-hover-overlay {
  opacity: 1;
}

/* 页面内容 */
.page-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  height: 0;
  background: #f0f2f5;
  padding: 20px;
  position: relative;
}

.back-button {
  position: fixed;
  top: 80px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  font-weight: 500;
  color: #606266;
}

.back-button:hover {
  transform: translateX(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  color: #409eff;
}

/* 动画 */
.card-slide-enter-active,
.card-slide-leave-active {
  transition: all 0.4s ease;
}

.card-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.card-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 响应式 */
@media (max-width: 1400px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .search-header {
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
  }
  
  .card-navigation {
    padding: 0 20px 20px;
  }
  
  .category-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
  }
  
  .back-button {
    top: 20px;
    left: 20px;
  }
}
</style>


